<template>
  <el-descriptions
    class="margin-top"
    direction="vertical"
    title=""
    :column="col"
    size="default"
    border
  >
    <el-descriptions-item
      v-for="(dayItem, index) in props.data.intervalDayList"
      :key="index"
    >
      <template #label>
        <div class="cell-item">{{ dayItem.date }}</div>
      </template>
      <el-form :model="shiftSetIdData" :inline="true" label-width="80px">
        <el-form-item label="">
          <el-select
            v-model="shiftSetIdData[index].shiftSystemId"
            placeholder="请选择班制"
            style="width: 100%"
            @change="changeShiftSet(index, dayItem)"
          >
            <el-option
              v-for="item in shiftSetList"
              :key="item.id"
              :label="item.shiftSetName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <!--<div>
        {{ props.data.shiftSetIdData[index] }}
      </div>-->
    </el-descriptions-item>
    <el-descriptions-item v-if="props.data.intervalDayList?.length % col !== 0">
      <template #label>
        <div class="cell-item"></div>
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
defineOptions({
  name: "CORERECKONDESCRIPTIONS",
  inheritAttrs: false,
});

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  yearMonthPlan: {
    type: String,
    default: () => {
      return "";
    },
  },
  column: {
    type: Number,
    default: () => {
      return null;
    },
  },
  start: {
    type: Number,
    default: () => {
      return 1;
    },
  },
});
const col = computed(() => props.column ?? props.data.intervalDayList?.length);
const shiftSetList: any[] = props.data.shiftSetList;
const shiftSetIdData = ref(props.data.shiftSetIdData);
function changeShiftSet(index: number, dayItem: any) {
  // shiftSetIdData.value[index].shiftSetId
  let find = shiftSetList.find((item) => item.id == shiftSetIdData.value[index].shiftSystemId);
  if (find) {
    shiftSetIdData.value[index].shiftSystemName = find.shiftSetName;
    shiftSetIdData.value[index].planDate = props.yearMonthPlan + "-" + dayItem.date.slice(3,5)
  }
}
</script>

<style lang="scss" scoped>
.cell-item {
  text-align: center;
}
.el-form--inline .el-form-item {
  margin-right: 0;
}
</style>
